<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding:0;margin:0}
        body{background: #abcdef}
        input{display: none}
        .switch{
            position:relative;
            display: block;
            width:38px;
            height: 20px;
            cursor:pointer;
            border-radius: 10px;
            background: #b0b0b0;
        }
        .switch:before{
            content:'OFF';
            position:absolute;
            top:1px;
            right:2px;
            font-size:12px;
            color:#fff;
            transform:scale(0.75);

        }
        .switch:after{
            content:'';
            position:absolute;
            top:-1px;
            left:-6px;
            width:22px;
            height:22px;
            border-radius: 50%;
            background-color: #fff;
            transition:left 200ms linear;
        }
        input[type=checkbox]:checked+label .switch{
            background-color: #18c250;
        }
        input[type=checkbox]:checked +label .switch:before{
            content:'ON';
            right:15px;
        }
        input[type=checkbox]:checked+label .switch:after{
            left:25px;
        }
    </style>
</head>
<body>
<input type="checkbox" id="input1">
<label for="input1">
    <a class="switch"></a>
</label>
</body>
</html>